<template>
  <div>
    <div class="flex items-center gap-4">
      <img :src="rightIcon" class="w-6 h-5" />
      加减阻剂输送
    </div>
    <div class="mt-4">
      <el-radio-group v-model="JZType">
        <el-radio value="0" size="large">特性设置</el-radio>
        <el-radio value="1" size="large"> 减阻率设置</el-radio>
      </el-radio-group>
    </div>
    <div
      v-if="JZType === '0'"
      class="mt-4 w-[426px] h-[380px] bg_detail rounded-lg shadow flex flex-col items-center gap-8 py-8 px-4 box-border"
    >
      <div class="flex items-center w-full gap-6">
        <span class="w-[140px]">减阻剂特性参数A</span>
        <el-input v-model="deblockingParameterA" class="!w-[160px]" />
      </div>
      <div class="flex items-center w-full gap-6">
        <span class="w-[140px] text-right">减阻剂特性参数B</span>
        <el-input v-model="deblockingParameterB" class="!w-[160px]" />
      </div>
      <div class="flex items-center w-full gap-6">
        <span class="w-[140px] text-right">减阻剂特性参数N</span>
        <el-input v-model="deblockingParameterN" class="!w-[160px]" />
      </div>
      <div class="flex items-center w-full">
        <span class="w-[140px] text-right">注入浓度</span>
        <div>
          <el-input v-model="injectionConcentration" class="!w-[160px] ml-6" />
        </div>
        <span class="ml-2">ppm</span>
      </div>
      <div class="flex items-center w-full">
        <span class="w-[140px] text-right">运行后注入时刻</span>
        <el-input v-model="injectionTime" class="!w-[160px] ml-6" />
        <span class="ml-2">小时</span>
      </div>
    </div>
    <div
      v-if="JZType === '1'"
      class="mt-4 w-[426px] h-[180px] bg_detail rounded-lg shadow flex flex-col items-center gap-8 py-8 px-4 box-border"
    >
      <div class="flex items-center w-full">
        <span class="w-[140px] text-right">减阻率</span>
        <div>
          <el-input v-model="deblockingRate" class="!w-[160px] ml-6" />
        </div>
      </div>
      <div class="flex items-center w-full">
        <span class="w-[140px] text-right">运行后注入时刻</span>
        <el-input v-model="injectionTime" class="!w-[160px] ml-6" />
        <span class="ml-2">小时</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import rightIcon from '@/assets/images/rightIcon.png'

// 响应式数据
const JZType = ref('0')
const deblockingParameterA = ref('10')
const deblockingParameterB = ref('6')
const deblockingParameterN = ref('0')
const deblockingRate = ref('0.1')
const injectionConcentration = ref('20')
const injectionTime = ref('2')

const validateSettings = () => {
  const draFields =
    JZType.value === '0'
      ? [
          { value: deblockingParameterA.value, name: '减阻剂特性参数A' },
          { value: deblockingParameterB.value, name: '减阻剂特性参数B' },
          { value: deblockingParameterN.value, name: '减阻剂特性参数N' },
          { value: injectionConcentration.value, name: '注入浓度' },
          { value: injectionTime.value, name: '运行后注入时刻' }
        ]
      : [
          { value: deblockingRate.value, name: '减阻率' },
          { value: injectionTime.value, name: '运行后注入时刻' }
        ]

  for (const field of draFields) {
    if (!field.value) {
      ElMessage.error(`${field.name}不能为空`)
      return false
    }
  }

  return true
}

const isFormValid = computed(() => {
  const draFields =
    JZType.value === '0'
      ? [
          deblockingParameterA.value,
          deblockingParameterB.value,
          injectionConcentration.value,
          deblockingParameterN.value,
          injectionTime.value
        ]
      : [deblockingRate.value, injectionTime.value]
  if (!draFields.every((field) => field)) return false

  return true
})

const getParamsData = () => {
  return JZType.value === '0'
    ? {
        method: JZType.value,
        C: injectionConcentration.value,
        T_dra: injectionTime.value,
        A: deblockingParameterA.value,
        B: deblockingParameterB.value,
        N: deblockingParameterN.value
      }
    : {
        method: JZType.value,
        a: deblockingRate.value,
        T_dra: injectionTime.value
      }
}

// 暴露给父组件的方法和数据
defineExpose({
  validateSettings,
  isFormValid,
  getParamsData
})
</script>
